body{
    margin: 0;
    background-color: #000;
}
.container{
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    .calculator{
        display: flex;
        flex-flow: row wrap;
        width: 340px;
        height: 550px;
        background-color: #202020;
        align-items: flex-start;
        align-content: flex-start;
        button{
            display: block;
            width:85px;
            height: 85px;
            font-weight: 300;
            line-height: 85px;
            border: 0;
            font-size: 32px;
            transition: opacity .2s ease-out;
            &:hover{
                opacity: .9;
            }
            &:active,&.active{
                opacity: .8;
            }
        }
        .calculator-display{
            flex: 1;
            overflow-x: scroll;
            height: 85px;
            color: white;
            font-weight: 100;
            line-height: 67px;
            font-size: 87px;
            padding-right: 10px;
            padding-top: 40px;
            text-align: right;
            &.blink{
                animation: blinker .1s linear 1;
            }
        }
        .calculator-keyboard{
            display: flex;
            flex-flow: row wrap;
            button.calculator-keyboard_number_key{
                background-color: #c7c7c7;
                color: #424346;
                outline: 1px solid #949599;
            }
            button.calculator-keyboard_operator_key{
                background-color: #f98410;
                color: #fff6f9;
                font-size: 36px;
                outline: 1px solid #ca5200;
                font-weight: 100;
            }
            button.calculator-keyboard_number_key:nth-child(-n+3){
                background-color: #afb0b5;
                font-size: 26px;
                // (-n+3) 匹配前三个子元素中button元素
            }
            button.calculator-keyboard_number_key[value="0"]{
                order: 10;
                flex: 2;
            }
            button.calculator-keyboard_number_key[value="."]{
                order: 11;
            }
            button.calculator-keyboard_number_key[value="1"]{
                order: 7;
            }
            button.calculator-keyboard_number_key[value="2"]{
                order: 8;
            }
            button.calculator-keyboard_number_key[value="3"]{
                order: 9;
            }
            button.calculator-keyboard_number_key[value="4"]{
                order: 4;
            }
            button.calculator-keyboard_number_key[value="5"]{
                order: 5;
            }
            button.calculator-keyboard_number_key[value="6"]{
                order: 6;
            }
            button.calculator-keyboard_number_key[value="7"]{
                order: 1;
            }
            button.calculator-keyboard_number_key[value="8"]{
                order: 2;
            }
            button.calculator-keyboard_number_key[value="9"]{
                order: 3;
            }
            .calculator-keyboard_container_numbers{
                display: flex;
                flex-basis: 75%;
                flex-flow: row wrap;
            }
            .calculator-keyboard_container_operators{
                display: flex;
                flex-basis: 25%;
                flex-flow: row wrap;
            }
        }
        
    }
}

@keyframes blinker{
    50%{
        opacity: 0;
    }
}